<template>
    <div class="login_box">
        <div class="login_form_box">
            <el-row class="row_box">
                <el-col :span="12">
                    <!-- svg 矢量图 -->
                    <svgIcon
                        name="back_man"
                        width="100%"
                        height="100%"
                    ></svgIcon>
                </el-col>
                <el-col :span="12" class="col_right">
                    <p>UserLogin</p>
                    <div class="title">
                        <h3>欢迎登录</h3>
                        <h5>硅谷甄选后台管理系统</h5>
                    </div>
                    <el-form
                        label-width="70px"
                        :model="loginFormData"
                        label-position="left"
                        style="max-width: 460px; margin-top: 40px"
                        :rules="rules"
                        ref="loginForm"
                    >
                        <el-form-item label="用户名" prop="username">
                            <el-input
                                :prefix-icon="UserFilled"
                                v-model="loginFormData.username"
                            />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input
                                type="password"
                                :prefix-icon="Lock"
                                v-model="loginFormData.password"
                                show-password
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                class="login_btn"
                                type="primary"
                                color="#3479f6"
                                round
                                size="default"
                                @click="login"
                                :loading="loading"
                                >登录</el-button
                            >
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue"
import { UserFilled, Lock } from "@element-plus/icons-vue"
import useUserStore from "@/store/modules/user"
import { useRouter } from "vue-router"
import { getHour } from "@/utils/time"
import { ElNotification } from "element-plus"

export default defineComponent({
    name: "",
    setup() {
        const loginFormData = reactive({
            username: "admin",
            password: "atguigu123", //管理员的默认密码
        })
        let loading = ref(false)

        const user = useUserStore()
        // 路由
        const $router = useRouter()

        function login() {
            loginForm.value.validate((valid) => {
                if (valid) {
                    // 按钮loading
                    loading.value = true
                    // 调pinia内的方法
                    const result = user.handleLogin(loginFormData)
                    // result 是一个promise的实例
                    result
                        .then((res) => {
                            // then 里面表示登录成功
                            $router.push({ path: "/" })
                            loading.value = false
                            // 欢迎提示
                            ElNotification({
                                title: "欢迎回来",
                                message: `Hi,${getHour()}`,
                                type: "success",
                            })
                        })
                        .catch((err) => {
                            // catch 里面表示登录失败
                            loading.value = false
                        })
                }
            })
        }

        const validatePassUsername = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户名不能为空"))
            } else if (value.length < 5 || value.loading > 10) {
                callback(new Error("用户名长度在5-10字符之间"))
            } else {
                callback()
            }
        }

        const validatePassPassword = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("密码不能为空"))
            } else if (value.length < 5 || value.length > 10) {
                callback(new Error("密码长度在5-10字符之间"))
            } else {
                callback()
            }
        }

        // 自定义表单验证规则
        const rules = reactive({
            username: [{ validator: validatePassUsername, trigger: "blur" }],
            password: [{ validator: validatePassPassword, trigger: "blur" }],
        })
        // 表单的ref对象，用作表单校验
        const loginForm = ref()

        return {
            loginFormData,
            UserFilled,
            Lock,
            login,
            loading,
            rules,
            loginForm,
        }
    },
})
</script>

<style scoped lang="scss">
.login_box {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    .login_form_box {
        width: 50%;
        height: 400px;
        background-color: white;
        border-radius: 40px 0 40px 0;
        .row_box {
            height: 100%;
            .col_right {
                padding: 40px 20px;
                p {
                    color: #b0b3bd;
                }
                .title {
                    margin-top: 10px;
                    display: flex;
                    h3 {
                        margin-right: 10px;
                    }
                    h5 {
                        color: #4e5253;
                        line-height: 18px;
                    }
                }
                .login_btn {
                    width: 100%;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>
